<template>
  <view class="page">
    <!-- 头部背景 -->
    <view class="head-bg">
      <view class="wallet-balance">
        <view class="wallet">
          <text class="number">￥{{ info.balance }}</text>
          <text
            ><text
              class="iconfont icon-qianbao"
              style="margin-right: 20rpx"
            ></text
            >当前余额</text
          >
        </view>
      </view>
      <view class="bg">
        <image src="/static/integral_bg1.png" mode=""></image>
      </view>
    </view>
    <!-- 记录列表 -->
    <view class="record-list">
      <view class="list" v-for="(item, index) in info.list" :key="index">
        <view class="title-date">
          <view class="title">
            <text>{{ item.remark }}</text>
          </view>
          <view class="date">
            <text>{{ item.create_time }}</text>
          </view>
        </view>
        <view class="integral">
          <text v-if="item.balance > 0" style="color: #22aa44"
            >+{{ item.balance }}</text
          >
          <text v-else>{{ item.balance }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      info: {},
    };
  },
  onLoad(options) {
    this.loadData();
  },
  methods: {
    async loadData() {
      const { data } = await this.$http.user.balanceLog();
      this.info = data;
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

.head-bg {
  position: relative;
  width: 100%;
  height: 300rpx;
  background: linear-gradient($base, $change-clor);
  .head-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4%;
    height: 100rpx;
    .user {
      display: flex;
      align-items: center;
      image {
        width: 70rpx;
        height: 70rpx;
        border-radius: 100%;
      }
      text {
        font-size: 28rpx;
        color: #ffffff;
        margin-left: 20rpx;
      }
    }
    .exchange {
      display: flex;
      align-items: center;
      text {
        font-size: 28rpx;
        color: #ffffff;
      }
    }
  }
  .wallet-balance {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200rpx;
    .wallet {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text {
        font-size: 30rpx;
        color: #ffffff;
      }
      .number {
        font-size: 60rpx;
        margin-top: 10rpx;
        // font-weight: bold;
      }
    }
  }
  .bg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}

/* 记录列表 */
.record-list {
  width: 100%;
  background-color: #ffffff;
  .list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4%;
    height: 140rpx;
    border-bottom: 2rpx solid #f6f6f6;
    .title-date {
      width: 70%;
      height: 100%;
      .title {
        display: flex;
        align-items: center;
        width: 100%;
        height: 60rpx;
        text {
          font-size: 28rpx;
          font-weight: bold;
          color: #222222;
        }
      }
      .date {
        display: flex;
        align-items: center;
        width: 100%;
        height: 60rpx;
        text {
          font-size: 24rpx;
          color: #959595;
        }
      }
    }
    .integral {
      display: flex;
      align-items: center;
      height: 100%;
      text {
        font-size: 28rpx;
        font-weight: bold;
        color: $base;
      }
    }
  }
}
</style>
